<template>
  <div class="page-container-padding page-view">
    <div class="action-bar">
      <el-date-picker
        v-model="qParams.start"
        type="date"
        style="width: 130px"
        value-format="yyyy-MM-dd"
        :clearable="false"
      />
      至
      <el-date-picker
        v-model="qParams.end"
        type="date"
        style="width: 130px"
        value-format="yyyy-MM-dd"
        :clearable="false"
      />
      <el-select v-model="qParams.st" style="margin-left: 6px">
        <el-option
          v-for="st in statTypes"
          :key="st.key"
          :value="st.key"
          :label="st.label"
        />
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="toStatistics">
        统计
      </el-button>
      <el-button type="success" @click="currentMonthQuery">计本月</el-button>
      <el-button @click="preMonthQuery">上一月</el-button>
      <el-button @click="nextMonthQuery">下一月</el-button>
      <el-button @click="yearQuery">全年</el-button>
      <el-button @click="preYearQuery">上一年</el-button>
      <el-button @click="nextYearQuery">下一年</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table border stripe :data="statList">
        <el-table-column prop="user_name" label="姓名" width="120">
          <template #default="{ row }">
            <div class="t-username" @click="userRows = row['rows']">
              {{ row.user_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="记录数" />
      </el-table>
    </div>

    <div style="margin-top: 10px">
      <div>【详细记录】</div>
      <el-table border stripe :data="userRows">
        <el-table-column
          prop="mistake_name"
          label="姓名"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mistake_date"
          label="日期"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="group_name"
          label="组别"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mistake_type_name"
          label="失误类型"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="discovery_name"
          label="发现人员"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mistake_desc"
          label="失误描述"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </div>
</template>

<script>
  import { GetMistakeStat } from '@/api/departmentWork/mistake'
  import {
    getMonthDatePoint,
    getYearDatePoint,
    datetimeToStr,
  } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        statTypes: [
          { key: 0, label: '默认统计' },
          { key: 1, label: '小组统计' },
          { key: 2, label: '个人统计' },
        ],
        qParams: {
          start: null,
          end: datetimeToStr(new Date(), true, '-'),
          st: 0,
        },
        statList: [],
        userRows: [],
      }
    },
    mounted() {
      this.setCurrentDates()
      this.getStatistics()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 4 ? 'previous' : 'current'
        const dateRange = getMonthDatePoint(new Date(), flag, '-')
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
      },

      toStatistics() {
        this.getStatistics()
      },

      // 本月查询
      currentMonthQuery() {
        const dateRange = getMonthDatePoint(new Date(), 'current', '-') // 当前月份
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
        this.getStatistics()
      },

      // 上一月查询
      preMonthQuery() {
        const dateRange = getMonthDatePoint(this.qParams.start, 'previous', '-')
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
        this.getStatistics()
      },

      // 下一月查询
      nextMonthQuery() {
        const dateRange = getMonthDatePoint(this.qParams.start, 'next', '-')
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
        this.getStatistics()
      },

      // 当前月份所在全年查询
      yearQuery() {
        let year = new Date(this.qParams.start).getFullYear()
        const dateRange = getYearDatePoint(year, 'current', '-')
        console.log(year, dateRange)
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
        this.getStatistics()
      },

      // 上一年查询
      preYearQuery() {
        let year = new Date(this.qParams.start).getFullYear()
        const dateRange = getYearDatePoint(year, 'previous', '-')
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
        this.getStatistics()
      },

      // 下一年查询
      nextYearQuery() {
        let year = new Date(this.qParams.start).getFullYear()
        const dateRange = getYearDatePoint(year, 'next', '-')
        this.qParams.start = dateRange[0]
        this.qParams.end = dateRange[1]
        this.getStatistics()
      },

      getStatistics() {
        GetMistakeStat(
          this.qParams.start,
          this.qParams.end,
          this.qParams.st
        ).then((res) => {
          console.log(res)
          this.statList = res.data
          this.userRows = []
          for (let i = 0; i < this.statList.length; i++) {
            this.userRows = this.userRows.concat(this.statList[i].rows)
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .page-view {
    background-color: #fff;
    .t-username {
      cursor: pointer;
      &:hover {
        color: #0078d7;
      }
    }
  }
</style>
